<template>
  <el-dialog v-model="selectUserShow" :title="'选择'+title" width="550">
    <div class="left">
    <el-select
        v-model="querySelectUser"
        multiple
        filterable
        remote
        reserve-keyword
        :placeholder="'搜索'+title+'...'"
        remote-show-suffix
        :collapse-tags="false"
        :remote-method="queryUser"
        :loading="loading"
        @change="queryChange"
    >
      <el-option
          v-for="item in queryOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
      />
    </el-select>
      <el-tree :props="treeProps" :load="loadNode" ref="tree"
               lazy show-checkbox
               @check-change="selectItem" />
    </div>
    <div class="right-tag">
      <el-tag
          v-for="tag in result"
          :key="tag.name"
          class="mx-1"
          closable
          @close="handleClose(tag)"
      >{{ tag.name }}</el-tag>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <span class="span" v-if="max>0">{{'最多可以选择'+max+'个，已选择：'+result.length}}</span>
        <el-button @click="selectUserShow = false">取消</el-button>
        <el-button type="primary" @click="handlerOk">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {searchSelectVariableQuery, searchSelectVariableTree} from "@/api/BusinessForDesignApi";

export default {
  name: "SelectVariableDialog",
  props:{
    tenant:{
      type:String,
      default:''
    },
    ok:{
      type:Function,
      default:null
    },
    title:{
      type:String,
      default:'选择信息'
    },
    variableType:{
      type:String,
      default:'client.directUser'
    },
    max:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
      loading:false,
      queryOptions:[],
      querySelectUser:'',
      selectUserShow:false,
      treeProps:{
        label: 'name',
        children: 'zones',
        isLeaf: 'select',
      },
      resultId:{},
      result:[]
    }
  },
  methods: {
    show(data){
      this.result=[]
      this.resultId={}
      this.selectUserShow=true
      if(data){
        let count = data.length
        for (let i = 0; i < count; i++) {
          let temp = data[i]
          if(temp.id){
            this.result.push(temp)
            this.resultId[temp.id]=true
          }
        }
      }
    },
    handlerOk(){
      if(this.ok){
        this.ok(this.result)
      }
      this.selectUserShow=false
    },
    // 搜索的用户数据。添加到右侧
    queryChange(h){
      this.querySelectUser=[]
      if(this.resultId[h[0]]){
        return
      }
      if(this.max>0&&this.result.length>=this.max){
        return;
      }
      for (let i = 0; i < this.queryOptions.length; i++) {
        let temp = this.queryOptions[i];
        if(temp.id==h[0]){
          this.result.push(temp)
          this.resultId[temp.id]=true
        }
      }
    },
    queryUser(keyword){
      let data = {
        'variableType':this.variableType,
        'type':'query',
        'query':keyword,
        '_tenant':this.tenant
      }
      searchSelectVariableQuery(data).then(res=>{
        this.queryOptions=res.data.result
      }).catch(res=>{
        console.log(res)
        this.$notify.error({title: '提示',message: '调用查询接口失败',showClose: false })})
    },
    loadNode(node,resolve){
      let data = {
        'variableType':this.variableType,
        'type':'tree',
        'parentId':node.data.id||'',
        '_tenant':this.tenant
      }
      searchSelectVariableTree(data).then(res=>{
        resolve(res.data.result)
      }).catch(res=>{
        console.log(res)
        this.$notify.error({title: '提示',message: '调用查询接口失败',showClose: false })})
    },
    selectItem(data,checked,indeterminate){
      // 如果是选中的组
      if(!data.select){
      }else{
        if(checked){
          if(this.max>0&&this.result.length>=this.max){
            return;
          }
          if(!this.resultId[data.id]) {
            this.result.push(data)
            this.resultId[data.id] = true
          }
        }else{
          this.handleClose(data)
        }
      }
    },
    // 删除选择的人
    handleClose(tag){
      delete this.resultId[tag.id]
      for (let i = 0; i < this.result.length; i++) {
        let temp = this.result[i]
        if(temp.id==tag.id){
          if(temp.$treeNodeId){
            let key = temp.$treeNodeId
            let node = this.$refs.tree.getNode((key));
            node.checked=false
          }
          this.result.splice(i,1)
          break
        }
      }
    }
  }
}
</script>

<style>
.left {
  float: left;
  width: 50%;
}
.right-tag {
  float: right;
  width: 49%;
  height: 330px;
  border-left: 1px solid #d6d6d6;
}
.el-tree {
  margin-top: 20px;
  min-height: 300px;
  max-height: 300px;
  overflow-y: auto;
}
.el-dialog__body {
  overflow-y: hidden;
  padding-bottom: 0px;
}
.el-tag{
  margin: 10px;
}
.dialog-footer .span {
  color: #adadad;
  font-size: 10px;
  line-height: 32px;
  padding-right: 20px;
}
</style>
